{% extends theme_path('base.html') %}

{% block title %}标签：{{ tag.name }}{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <!-- 标签信息 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-6">
        <h1 class="text-xl font-bold text-gray-900 dark:text-white mb-2">
            标签：{{ tag.name }}
        </h1>
        <p class="text-gray-500 dark:text-gray-400">
            共有 {{ articles.total }} 篇相关文章
        </p>
    </div>

    <!-- 文章列表 -->
    <div class="space-y-6">
        {% for article in articles.items %}
        <article class="bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden transition-colors duration-200">
            <div class="p-6">
                <h2 class="text-xl font-bold mb-2">
                    <a href="{{ ArticleUrlGenerator.generate(article.id, article.category_id, article.created_at) }}" 
                       class="text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400">
                        {{ article.title }}
                    </a>
                </h2>
                <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
                    {% set author = get_user_info(article.author) %}
                    <div class="flex items-center">
                        <img src="{{ author.avatar }}" alt="avatar" class="w-6 h-6 rounded-full">
                        {% if author.id %}
                            <a href="{{ url_for('user.author', id=author.id) }}" 
                               class="ml-2 text-sm font-medium text-gray-900 hover:text-blue-600">
                                {{ author.username }}
                            </a>
                        {% else %}
                            <span class="ml-2 text-sm text-gray-500">{{ author.username }}</span>
                        {% endif %}
                    </div>
                    <span class="mx-2">•</span>
                    <span>{{ article.created_at.strftime('%Y-%m-%d %H:%M') }}</span>
                    <span class="mx-2">•</span>
                    <span>{{ article.view_count }} 阅读</span>
                </div>
                <div class="text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">
                    {{ article.content|striptags|truncate(200) }}
                </div>
                <div class="flex items-center space-x-4">
                    <a href="{{ ArticleUrlGenerator.generate(article.id, article.category_id, article.created_at) }}" 
                       class="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">
                        阅读全文
                    </a>
                    {% if article.tags %}
                    <div class="flex items-center space-x-2">
                        {% for tag in article.tags %}
                        <a href="{{ url_for('blog.tag', tag_id_or_slug=tag.id if not tag.use_slug else tag.slug) }}" 
                           class="text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
                            #{{ tag.name }}
                        </a>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
            </div>
        </article>
        {% else %}
        <div class="text-center py-12 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
            <p class="text-gray-500 dark:text-gray-400">暂无文章</p>
        </div>
        {% endfor %}
    </div>

    <!-- 分页 -->
    {% if articles.pages > 1 %}
    <div class="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
        {% with endpoint='blog.tag', kwargs={'id': tag.id} %}
        {% include 'components/pagination.html' %}
        {% endwith %}
    </div>
    {% endif %}
</div>
{% endblock %} 